<template>
  <view>
    <view class="smart-page-head">
      <view class="smart-page-head-title">navigator, 链接</view>
    </view>

    <navigator 
      url="/pages/tabBar/tabcompage/newpage/newpage" 
      hover-class="navigator-hover"
      class="nav-container"
    >
      <button type="default" class="nav-btn">跳转到新页面</button>
    </navigator>

    <navigator 
      url="/pages/tabBar/tabcompage/newpage/newpage?title=redirect" 
      open-type="redirect" 
      hover-class="other-navigator-hover"
      class="nav-container"
    >
      <button type="default" class="nav-btn">在当前页打开</button>
    </navigator>

    <navigator 
      url="/pages/tabBar/api/api" 
      open-type="switchTab" 
      hover-class="other-navigator-hover"
      class="nav-container"
    >
      <button type="default" class="nav-btn">跳转tab页面</button>
    </navigator>

    <navigator 
      url="/pages/tabBar/tabcompage/login/login"
      hover-class="other-navigator-hover"
      class="nav-container"
    >
      <button type="default" class="nav-btn">跳转到登录页面</button>
    </navigator>

    <button 
      type="default" 
      @click="gonavigate" 
      class="nav-btn standalone-btn"
    >
      带参数跳转
    </button>

    <navigator 
      url="/pages/imageSelect/index" 
      hover-class="other-navigator-hover"
      class="nav-container"
    >
      <button type="default" class="nav-btn">图片选择与预览</button>
    </navigator>

    <navigator 
      url="/pages/imageView/imageView" 
      hover-class="other-navigator-hover"
      class="nav-container"
    >
      <button type="default" class="nav-btn">下载并显示网络图片</button>
    </navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'navigator',
      Account: 'yxy',
      CID: 123456
    }
  },
  methods: {
    gonavigate() {
      uni.navigateTo({
        url: `/pages/tabBar/tabcompage/newpage/newpage?Account=${this.Account}&cid=${this.CID}`
      })
    }
  }
}
</script>

<style scoped>
.smart-page-head {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}
.smart-page-head-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.nav-container {
  display: flex;
  justify-content: center;
  margin: 15rpx 0;
}
.nav-btn {
  width: 600rpx;
  margin: 0;
}
.standalone-btn {
  display: block;
  margin: 15rpx auto;
}
</style>